<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 700px;
            border: 1px solid #ccc;
            margin: 100px auto;
            text-align: center;
            overflow: hidden;
        }

        textarea {
            margin-top: 10px;
            width: 400px;
            height: 200px;
        }

        li {
            /* 发布的留言先隐藏掉然后通过slideDonw()方法带有滑动效果的下拉出来 会比较好看 */
            display: none;
            text-align: left;
            list-style: none;
            border-bottom: 1px solid #ccc;
        }

        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            //   1.点击按钮创建一个li把文本内容取过来
            $('.btn').on('click', function () {
                var li = $('<li></li>')
                li.html($('textarea').val() + "<a href='javascript:;'>删除</a>")
                $('ul').prepend(li)
                // 生成的li一开始是在css里设置让它隐藏起来的 
                // 在jq这里通过slideDown()方法让隐藏起来带有滑动效果的显示出来 而不是直接生成 会比较好看 
                li.slideDown()
                $('textarea').val('')
            })
            //   2.发布完成后点击a 删除li on可以给未来动态创建的元素也绑定事件
            $('ul').on('click', 'a', function () {
                // 同上一样 删除li的话也是利用slideUp()方法 让它带有滑动效果的再次隐藏起来
                $(this).parent().slideUp(
                    // 隐藏后dom结构里还是存在的 如果确实想删除可以利用slideup()方法里的回调函数进行remove()删除 （因为一定是等上拉的滑动效果结束后再删除结构 所以利用回调函数进行删除）
                    function () {
                        $(this).remove()
                    }
                )




            })

        })
    </script>
</head>

<body>
    <div>
        <span>微博发布</span>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>

        </ul>
    </div>
</body>

</html>